<template>
  <div class="login">
    <div class="left">
      <div class="img"></div>
    </div>
    <div class="right">
      <div class="login-box">
        <img src="@/assets/images/logo.png" alt="logo" class="logo" />
        <div class="wellcome-title">欢迎您登录{{ appConfig?.web_name }}</div>
        <!-- 表单 -->
        <div class="login-form">
          <el-form :model="form" size="large" label-position="top">
            <el-form-item label="用户名">
              <el-input v-model="form.username" placeholder="输入用户名" />
            </el-form-item>
            <el-form-item label="密码">
              <el-input
                type="password"
                v-model="form.password"
                placeholder="输入密码"
              />
            </el-form-item>
            <el-form-item>
              <el-checkbox v-model="form.remember" label="记住账户" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" class="login-btn" @click="onSubmit"
                >登录</el-button
              >
            </el-form-item>
          </el-form>
          <div class="rights">
            ©2023 {{ appConfig?.web_name }} All Rights Reserved.
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, reactive } from "vue";
import { ElMessage } from "element-plus";
import api from "@/lnk/admin/api";
import userStore from "@/lnk/admin/store/user";
import appStore from "@/lnk/admin/store/app";
import tools from "@/lnk/utils/tools";
import router from "@/lnk/router";

const appConfig = computed(() => {
  return appStore.state.config;
});

const form = reactive({
  username: "",
  password: "",
  remember: false,
});

const init = () => {
  const rememberAccount = tools.session.get("remember-account");
  if (rememberAccount) {
    for (const key in rememberAccount) {
      form[key] = rememberAccount[key];
    }
  }
};

const onSubmit = async () => {
  const res = await api.admin.login(form);
  if (res.error) {
    ElMessage.error(res.msg);
  } else {
    tools.storage.set("token", res.data.token, appConfig.value.jwt.ttl);
    await userStore.dispatch("profile");
    if (form.remember) {
      tools.session.set("remember-account", form);
    } else {
      tools.session.remove("remember-account");
    }
    router.push("/dashboard");
  }
};

init();
</script>

<style lang="scss" scoped>
@media only screen and (min-width: 768px) {
  .login {
    display: flex;

    .left {
      width: 600px;
      height: 100vh;
      .img {
        background-image: url("@/assets/images/login-bg.png");
        background-size: cover;
        background-repeat: no-repeat;
        height: 100%;
        width: 100%;
      }
    }

    .right {
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;
      padding: 30px;
      position: relative;
    }
    .login-box {
      width: 400px;

      .logo {
        width: 50px;
        height: 50px;
      }
      .wellcome-title {
        font-size: 32px;
        font-weight: 500;
        margin: 32px 0 24px 0;
      }
      .subtitle {
        color: #999;
        font-size: 10px;
        margin-bottom: 30px;
      }
      .login-form {
        text-align: center;
      }

      .login-btn {
        width: 100%;
      }
    }

    .rights {
      margin: 32px auto;
      text-align: center;
      height: 32px;
      line-height: 32px;
      font-size: 12px;
      color: #8e919e;
    }
  }
}

@media only screen and (max-width: 768px) {
  .login {
  display: flex;

  .left {
    display: none;
    .img {
      background-image: url("@/assets/images/login-bg.png");
      background-size: cover;
      background-repeat: no-repeat;
      height: 100%;
      width: 100%;
    }
  }

  .right {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    padding: 30px;
    position: relative;
  }
  .login-box {
    width: 100%;
   
    .logo {
      width: 50px;
      height: 50px;
    }
    .wellcome-title {
      font-size: 32px;
      font-weight: 500;
      margin: 32px 0 24px 0;
    }
    .subtitle {
      color: #999;
      font-size: 10px;
      margin-bottom: 30px;
    }
    .login-form {
      text-align: center;
    }

    .login-btn {
      width: 100%;
    }
  }

  .rights {
    margin: 32px auto;
    text-align: center;
    height: 32px;
    line-height: 32px;
    font-size: 12px;
    color: #8e919e;
  }

  
}
}
</style>
